<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { getCartData } from "../../api/server";
import { useRouter } from "vue-router";

// import api from "../axios/http"; // 导入api实例

// // 添加缺失的ref导入
// import { ref as dialogRef } from "vue";  // 用于对话框引用

const router = useRouter();

// 定义商品类型
interface Product {
  id: number;
  proName: string;
  price: number;
  picAddr: string;
  num: number;
  productSize: string; // 添加productSize属性
}

// 定义模型变量
const cartItems = ref<Product[]>([]);
const cbs = ref<number[]>([]); // 对应一组复选框 
const cbAll = ref(false);
const total = ref(0); // 总价


// 加载钩子
onMounted(() => {
  fetchCartData();
});

// 获取购物车数据
const fetchCartData = async () => {
  try {
    const response = await getCartData();
    console.log("购物车数据获取成功：",response);
    if (response.data.code === 200 && response.data.data) {
      cartItems.value = response.data.data as Product[];
    }
  } catch (error) {
    console.error("获取购物车数据失败:", error);
  }
};




// 实现删除
// const del = () => {
//   const ary = cbs.value; // 伪数组
//   if (ary.length === 0) {
//     showToast("你没有选择删除的商品");
//     return;
//   }
//   // 调用接口实现删除
//   api.get("/user/delcar", { params: { sid: ary } }).then((data: any) => {
//     if (data.status === 200) {
//       location.reload();
//     } else {
//       showToast("删除失败");
//     }
//   }).catch((error: any) => {
//     console.log(error);
//   });
// };

// 全选功能
const selAll = () => {
  if (!cbAll.value) {
    const ids = cartItems.value.map(item => item.id);
    cbs.value = ids;
  } else {
    cbs.value = [];
  }
};

// 监听模型变量
watch(cbs, (newv) => {
  // 判断全选复选框的状态
  if (cbs.value.length === cartItems.value.length) {
    cbAll.value = true;
  } else {
    cbAll.value = false;
  }
  // 计算总价
  let temp = 0;
  cbs.value.forEach((item) => {
    // 通过选中的id，找到商品
    const pintem = cartItems.value.find((p) => p.id === item);
    if (pintem) {
      temp += pintem.num * pintem.price;
    }
  });
  total.value = temp;
});

// 返回刷新方法
const reload = () => {
  location.reload();
};

// 转换图片路径
function changePath(path: string): string {
  return path.replace("./img", "/src/assets/img");
}


</script>
<template>
  <div id="maint">
    <van-nav-bar title="我的购物车" @click-left="router.back()" @click-right="reload()" left-arrow style="background-color: white; --van-nav-bar-icon-color:rgb(0, 0, 0); --van-nav-bar-arrow-size:30px; --van-nav-bar-title-text-color:rgb(0, 0, 0)">
      <template #right>
        <van-icon name="replay" color="rgb(0, 0, 0)" size="30" />
      </template>
    </van-nav-bar>

    <div class="m">

      <van-card
       price="116.00"
       title="明前"
       thumb="http://39.105.198.203:3001/list/mq.jpg">
         <template #footer>
           <van-button size="mini">+</van-button>
           <span>{{ 1 }}</span>
           <van-button size="mini">-</van-button>
         </template>
      </van-card>


      <!-- 一个商品 -->
      <div class="product" v-for="item, index in cartItems" :key="index">
        <div>
          <input type="checkbox" v-model="cbs" :value="item.id"> <!-- 将商品的id作为复选框值 -->
        </div>
        <div>
          <img :src="changePath(item.picAddr)" alt="">
        </div>
        
        <div>
          <button @click="">修改</button>
        </div>
      </div>
      <div v-if="cartItems.length == 0">暂无商品</div>
    </div>
    <div class="foot">
      <div>
        <input v-model="cbAll" @click="selAll();" type="checkbox" name="" id=""> 全选 <button @click=";">删除</button>
      </div>
      <div>
        合计:￥:<span style="color: red; font: 18px; font-weight: bold; margin-right: 10px;">{{ total }}</span><button>立即结算</button>
      </div>
    </div>

    
  </div>
</template>
<style scoped>
.m {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 10px;
}

.product {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
  color: rgb(0, 0, 0);
}

.product img {
  width: 100px;
}

.foot {
  height: 40px;
  position: fixed;
  bottom:60px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items:center;
}
</style>